import React, { useState, useEffect } from 'react'

export default function MultipleStates() {
  const [num, setNum] = useState(100)
    const [name, setName] = useState('felixlu')
  // }
  const [obj, setObj] = useState({
    text: 'hello'
  })

  // const [info, setInfo] = useState({
  //   x: 100,
  //   y: 100,
  //   height: 1000,
  //   width: 800
  // })

  const [position, setPosition] = useState({
    x: 100,
    y: 100,
  })

  const [size, setSize] = useState({
    height: 1000,
    width: 800
  })

  useEffect(() => {
    window.addEventListener('mousemove', (e) => {
      setPosition({
        x: e.pageX,
        y: e.pageY
      })
    })
  }, [])

  return (
    <>
      <div>{num}</div>
      <div>{name}</div>
      <div>{JSON.stringify(obj)}</div>
      <div>{size.height} / {size.width}</div>
      <div>{position.x} / {position.y}</div>
    </>
  )
}
